import axios from "axios";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { ProductCard } from 'react-vant';
interface RouterList{
    title:string,
    word:string,
    id:string,
    image:string,
    price:number
}
const Home:React.FC = () => {
    const [list, setList] = useState<RouterList[]>([])
    const navigate=useNavigate()
    useEffect(() => {
        axios.get('/api/list').then((res) => {
            const resp = res.data.data
            setList(resp)
        })
    }, [])
    return (
        <div>
            {
                list.map((item) => {
                    return (
                        <ProductCard
                            price={item.price}
                            desc={item.word}
                            title={item.title}
                            thumb={item.image}
                            key={item.id}
                            onClick={
                                ()=>navigate(`/detail/${item.id}`,{state:item})
                            }
                        />
                    )
                })
            }
        </div>
    )
}
export default Home